<template>
  <div :class="blue?'colorBlue':'colorPink'">
    <div :class="blue?'bannerBlue':'bannerPink'"></div>
    <div class="circleBox">
      <span class="circleSmall" @click="changeFont('small')"></span>
      <span class="circleBig" @click="changeFont('big')"></span>
    </div>
    <div class="content" ref="content">
      本文选自《楚辞•九歌》。《九歌》是屈原根据楚国南方民间流行的祭祀乐歌加工润色而成的一组抒情民歌。《山鬼》是《九歌》中祭祀山神的歌曲。山鬼，即山中女神。屈原以楚国民间传说为题材，创造了美丽痴情的山鬼形象，生动细腻地刻画了山鬼赴约、在风雨中等待情人到来的复杂心态，表现了人类对爱情的忠贞追求。从屈原的遭遇和一贯的创作风格来看，诗里的山鬼在凄风苦雨中痴情等待的形象，显然寄寓着诗人在流放中忠君忧国的个人情怀。
      <br/><br/>
诗的第一部分先写山鬼以欢快喜悦的心情穿着打扮，准备与爱人约会，表现了山鬼对纯真爱情的痴心与渴求。后面三部分写山鬼等待及失恋时的痛苦心态，寄寓了诗人思君忧国的悱恻情感。全诗将幻想与现实交织在一起，具有浓郁的浪漫主义色彩。此外，该诗抒情和叙事结合、句式以六言为主（不算语气词“兮” 字）、语言华美等特点，也都体现了屈原诗歌的一贯风格。
    </div>
    <br/>
    <div style="text-align: right;
    margin-right: 1rem;">
      <van-icon name="arrow-left" size="27" color="#ffbeff" />
    </div>
    <br/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      blue: true, //true banner为蓝色 字为粉色 背景颜色为蓝色
    }
  },
  methods: {
    changeFont(f) {
      if( f === "small") {
        //字体大小为0.5rem
        this.$refs.content.style.fontSize = "0.5rem"
      } else {
        //字体大小为0.7rem
        this.$refs.content.style.fontSize = "0.7rem"
      }
    }
  }
}
</script>
<style scoped>
.bannerBlue {
  background-image: url('./../../assets/mountainOp1Blue.gif');
  background-size: cover;
  width:100%;
  height:8rem;
  margin-bottom: 0.5rem;
}
.colorBlue {
  color: #ffbeff;
  background: #0044ae
}
.circleSmall {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: #ffbeff;
  border-radius: 0.5rem;
}
.circleBig {
  display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #ffbeff;
    border-radius: 1rem;
    margin-left: 1rem;
}
.circleBox {
  padding-right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 3rem
}
.content {
  margin-left: 0.5rem;
  margin-right: 0.6rem;
  font-size: 0.5rem;
}
</style>